<!-- 采集表页面 -->
<template>
  <div class="collectTable">
    <div class="collect-title"><img :src="img.iconM" alt=""> {{ title }}</div>
    <div class="collect-content" v-show="isShow">
      <el-row :gutter="10">
        <el-col :span="4">
          <div class="collect-tree">
            <div class="collectTreTtitle">力量构成</div>
            <div>
              <el-input placeholder="输入关键字进行过滤" v-model="filterText">
              </el-input>
              <el-tree class="filter-tree" :data="treeData" :props="defaultProps" default-expand-all
                :filter-node-method="filterNode" ref="tree">
              </el-tree>
            </div>
          </div>
        </el-col>
        <el-col :span="20">
          <div class="tableHeadBox">
            <div class="" style="display: flex;align-items: center;">
              <span style="width: 80px;">状态：</span>
              <el-select v-model="stateValue" placeholder="请选择">
                <el-option v-for="item in statOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div>
              <el-button type="primary" plain><i class="el-icon-s-promotion"></i> 发布</el-button>
              <el-button type="primary" plain><i class="el-icon-document-copy"></i>复制</el-button>
              <el-button type="primary btnwidth120" plain @click="_download"><i
                  class="el-icon-download"></i>下载采集表</el-button>
              <el-button type="primary" plain><i class="el-icon-delete"></i> 删除</el-button>
              <el-button type="primary" @click="_addTable()"><i class="el-icon-plus"></i> 新增</el-button>
            </div>
          </div>
          <div class="data-collect-table">
            <el-table border ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
              :row-class-name="tableRowClassName" height="calc(100vh - 210px)">
              <!-- 调整表格列的prop属性与数据字段对应 -->
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column label="名称" prop="dataName" align="left"></el-table-column>
              <el-table-column prop="dataFrom" label="表名" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="type" align="left" label="分类" width="250"></el-table-column>
              <el-table-column prop="createUser" label="状态" align="left" width="180">
                <template slot-scope="scope">
                  <div class="state_3" v-if="scope.row.storageSize && scope.row.storageSize > 0">已发布</div>
                  <div class="state_4" v-else>失败</div>
                </template>
              </el-table-column>
              <el-table-column prop="storageSize" label="创建人" align="left" width="150">
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" align="left" width="250">
              </el-table-column>
              <el-table-column prop="address" label="操作" align="left" width="150px">
                <template slot-scope="scope">
                  <el-button type="text" @click="preview(scope.row)">详情</el-button>
                  <el-button type="text" @click="edit(scope.row)">编辑</el-button>
                  <el-button type="text" @click="del(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="table-pagination">
              <el-pagination style="text-align: right; padding: 20px 10px 10px 10px"
                :current-page.sync="searchParams.pageNo" @current-change="_page" @size-change="_pageSize"
                :page-sizes="[10, 20, 30, 40]" :page-size="searchParams.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
              </el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 新增采集表 -->
    <CollectAdd v-show="!isShow" :currentRowData="currentRowData" :pageStatus="pageStatus"
      @collectIndex="collectIndex" />
    <!-- 下载采集表 -->
    <el-dialog title="下载采集表" :visible.sync="dialogVisible" width="60%">
      <DownloadCollcet v-if="dialogVisible" @close="close" ref="detail" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">下 载</el-button>
        <el-button type="primary" @click="dialogVisible = false" plain>取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import iconM from '@/assets/images/iconMini.png'
import CollectAdd from './collectTable/index.vue'
import DownloadCollcet from './collectTable/downloadCollcet.vue'
export default {
  name: 'collectTable',
  components: {
    CollectAdd,
    DownloadCollcet
  },
  data() {
    return {
      filterText: '',
      dialogVisible: false,
      isShow: true,
      pageStatus: '',
      currentRowData: {},
      title: '数据采集表',
      receivedIndex: {},
      searchParams: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      stateValue: '2',
      statOptions: [
        {
          label: '全部',
          value: '2'
        },
        {
          label: '正常',
          value: '1'
        },
        {
          label: '异常',
          value: '0'
        }
      ],
      treeData: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      tableData: [
        {
          dataName: '数据表1',
          dataFrom: '表1',
          createTime: '2020-01-01 00:00:00',
          createUser: '张三',
          storageSize: 1024,
          fileSize: 1,
          address: 'http://www.baidu.com'
        },
        {
          dataName: '数据表2',
          dataFrom: '表3',
          createTime: '2020-01-01 00:00:00',
          createUser: '张三',
          storageSize: 1024,
          fileSize: 1,
          address: 'http://www.baidu.com'
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      img: {
        iconM
      },
    }
  },
  created() {
    // console.log('当前状态是：', this.$store.getters.getStatus);
    this.getTabelPage();
  },


  methods: {
    // 树形过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 获取表格数据
    getTabelPage() {

      this.total = 2;
    },
    // 表格行样式回调
    tableRowClassName({ row, rowIndex }) {
      row.rowIndex = rowIndex + 1;
    },
    //
    _page(val) {
      this.searchParams.pageNo = val;
      this.getTabelPage();
    },
    _pageSize(val) {
      this.searchParams.pageSize = val;
      this.getTabelPage();
    },
    //下载采集表
    _download() {
      this.dialogVisible = true;
    },
    //新增
    _addTable() {
      this.pageStatus = 'add';
      this.isShow = false;
      this.currentRowData = {}
    },
    //详情
    preview(row) {
      console.log(row)
    },
    //编辑
    edit(row) {
      this.pageStatus = 'add';
      this.isShow = false;
      this.currentRowData = row
      console.log(row)
    },
    //删除
    del(row) {
      this.$confirm("是否确认删除该数据？", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // delTemplateAnalysis(row.Data.id).then(res => {
        //   if (res.code != 200) {
        //     this.$message.error(res.msg)
        //     return
        //   }
        //   this.$message.success('删除成功')
        //   this.getTable()
        // })
      })
    },
    //判断是否关闭新增页面
    collectIndex(message) {
      // console.log(message)
      //  const loading = this.$loading({
      //     lock: true,
      //     text: 'Loading',
      //     spinner: 'el-icon-loading',
      //     background: 'rgba(0, 0, 0, 0.7)'
      //   });
      let that = this;
      // setTimeout(() => {
      // loading.close();
      that.isShow = message.state;
      // }, 200);
    },
    //下载
    submit() {
      this.dialogVisible = false
     },
    // 关闭
    close() {
      this.dialogVisible = false
    },

  },
  mounted() {

  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    siderbarMsg(newVal) {
      console.log('状态更新为：', newVal);
    }
  },
  computed: {
    siderbarMsg() {
      return this.$store.getters.getStatus;
    }
  }

}
</script>

<style scoped>
.collect-content {
  margin-top: 5px;
}

.collect-title {
  font-size: 20px;
}

.collect-tree {
  border: 1px solid var(--bigborder-color);
  box-sizing: border-box;
  height: calc(100vh - 84px);
  background: var(--form-bg-a);
}

.collect-tree>div {
  padding: 10px;
}

.collectTreTtitle {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bigborder-color);
  background: linear-gradient(90deg, rgba(0, 153, 255, 1), rgba(0, 153, 255, 0.1));
}

.filter-tree {
  margin-top: 10px;
}

.tableHeadBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  box-sizing: border-box;
  border: 1px solid var(--bigborder-color);
  margin-bottom: 10px;
}
</style>